<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue父子组件</title>
    <script src="../assets/vue.js"></script>
</head>
<body>
<h1>vue父子组件交互</h1>
<hr>
<div id="app">
    {{message}}
    <component :is="who"></component>
    <p><button @click="change">change</button></p>
</div>
<script>
    var child = {
        template:`
            <div style="color:red">这里是一个子组件</div>
        `
    }
    var parent = {
        template:`
            <div>
                <p style="color:green;">这里是父组件</p>
                <child></child>
            </div>
        `,
        components:{
            'child':child
        }
    }

    var componentA = {
        template:`<div style="color:red;">我是componentA组件。</div>`
    }
    var componentB = {
        template:`<div style="color:green;">我是componentB组件。</div>`
    }
    var componentC= {
        template:`<div style="color:blue;">我是componentC组件。</div>`
    }
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello world!',
            who:'componentA'
        },
        components:{
            'componentA':componentA,
            'componentB':componentB,
            'componentC':componentC
        },
        methods:{
            change:function(){
                if(this.who === 'componentA'){
                    this.who = 'componentB'
                }else if(this.who === 'componentB'){
                    this.who = 'componentC'
                }else{
                    this.who = 'componentA'
                }
            }
        }
    })
</script>
</body>
</html>